<template>
  <div class="companylist content">
    <div class="head_top">
      <el-form
        :model="formInline"
        inline
        ref="topform"
        class="demo-form-inline"
      >
        <el-form-item label="企业编号" prop="eid">
          <el-input
            v-model="formInline.eid"
            placeholder=""
            class="w100"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input
            v-model="formInline.name"
            placeholder=""
            class="w149"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建者" prop="username">
          <el-input
            v-model="formInline.username"
            placeholder=""
            class="w100"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="formInline.status"
            placeholder="请选择状态"
            class="w149"
          >
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="clear">清除</el-button>
          <el-button
            @click="add"
            v-if="
              $store.state.role == '管理员' || $store.state.role == '超级管理员'
            "
            >+新增企业</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table :data="tableData" class="company_table" width="100%">
        <el-table-column label="序号" width="80">
          <template v-slot="scope">
            <span>{{
              pagination.pageSize * (pagination.currentPage - 1) +
                scope.$index +
                1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid" width="140">
          <template v-slot="scope">
            <span>{{ scope.row.eid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业名称" prop="name" width="160">
          <template v-slot="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建者" prop="username" width="180">
          <template v-slot="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="create_time" width="180">
          <template v-slot="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template v-slot="scope">
            <span>{{ scope.row.status == 0 ? "禁用" : "开启" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          v-if="
            $store.state.role == '管理员' || $store.state.role == '超级管理员'
          "
        >
          <template v-slot="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              v-if="
                $store.state.role == '管理员' ||
                  $store.state.role == '超级管理员'
              "
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="changeStatus(scope.row.id)"
              >{{ scope.row.status == 0 ? "启用" : "禁用" }}</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[1, 5, 20, 40]"
        :page-size="pagination.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        class="page"
      >
      </el-pagination>
    </div>
    <companyDialog
      :companyInfo="companyInfo"
      :mode="mode"
      @getData="getData"
      ref="dialog"
    ></companyDialog>
  </div>
</template>

<script>
// import pages from "@/components/pages.vue";
import { getcompanyList, setcompanyStatus, delcompany } from "@/api/company.js";
import companyDialog from "@/components/companyDialog.vue";
export default {
  components: {
    companyDialog,
  },
  data() {
    return {
      formInline: {
        name: "", //	否	string	企业名称
        page: "", //	否	string	页码 默认为1
        limit: "", //	否	string	页尺寸 默认为10
        eid: "", //	否	string	企业id
        username: "", //	否	string	用户名
        status: "", //	否	string	状态 1（启用） 0（禁用）
      },
      mode: "add",
      tableData: [], //用户列表数据
      companyInfo: {}, //编辑弹框数据
      pagination: {
        //页签数据
        total: 1,
        pageSize: 1,
        currentPage: 1,
      },
    };
  },
  methods: {
    clear() {
      console.log("ss");
      this.$refs.topform.resetFields();
    },
    getData() {
      let list = {
        //请求参数对象
        ...this.formInline,
        page: this.pagination.currentPage, //需要请求的页码
        limit: this.pagination.pageSize, //每页内的内容条数
      };
      getcompanyList(list).then((res) => {
        console.log("企业信息", res);
        this.tableData = res.data.data.items;
        console.log(this.tableData);
        this.pagination.total = res.data.data.pagination.total;
      });
    },

    //改变用户状态
    changeStatus(id) {
      setcompanyStatus({ id })
        .then(() => {
          this.$message.success("状态修改成功");
          this.getData();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //删除用户
    handleClick(id) {
      this.$confirm("你确定要删除该用户吗?", "温馨提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delcompany({ id })
          .then(() => {
            this.$message.success("删除成功");
            this.getData();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    //新增用户
    add() {
      this.mode = "add";
      this.$refs.dialog.isShow = true;
    },
    //编辑用户
    edit(data) {
      this.$refs.dialog.isShow = true;
      this.mode = "edit";
      this.companyInfo = JSON.parse(JSON.stringify(data));
    },
    onSubmit() {
      this.getData();
    },
    //页容量改变
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    //当前页改变
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagination.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less">
.companylist {
  .el-table__header,
  .el-table__body {
    margin: 0 auto;
    text-align: center;
  }
  .el-table td,
  .el-table th {
    text-align: center;
  }
  .head_top {
    height: 110px;
    position: relative;
    overflow: hidden;
    .w250 {
      width: 100px;
    }
    .w300 {
      width: 149px;
    }
    .demo-form-inline {
      margin-left: 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .main {
    overflow: hidden;
    position: relative;
    .page {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}
</style>
